<template>
	<view class="container">
		<!-- 顶部装饰背景 -->
		<view class="top-decoration">
			<view class="decoration-circle circle-1"></view>
			<view class="decoration-circle circle-2"></view>
			<view class="decoration-circle circle-3"></view>
		</view>

		<!-- 管理员信息卡片 -->
		<view class="admin-card">
			<view class="card-background">
				<view class="bg-pattern"></view>
			</view>
			<view class="admin-header">
				<view class="avatar-container">
					<image class="avatar" :src="adminInfo.avatarUrl || '/static/default-avatar.png'" mode="aspectFill"></image>
					<view class="avatar-ring"></view>
				</view>
				<view class="admin-info">
					<text class="admin-name">{{ adminInfo.adminName }}</text>
					<text class="admin-role">系统管理员</text>
					<view class="status-indicator">
						<view class="status-dot"></view>
						<text class="status-text">在线</text>
					</view>
				</view>
				<view class="admin-actions">
					<view class="refresh-btn" @click="refreshData">
						<text class="refresh-icon">🔄</text>
						<text class="refresh-text">刷新</text>
					</view>
					<view class="logout-btn" @click="handleLogout">
						<text class="logout-icon">🚪</text>
						<text class="logout-text">退出</text>
					</view>
				</view>
			</view>

			<view class="admin-stats">
				<view class="stats-header">
					<text class="stats-title">今日数据概览</text>

				</view>
				<view class="stats-grid">
					<view class="stat-item">
						<view class="stat-icon students-stat">
							<text class="stat-icon-text">👥</text>
						</view>
						<view class="stat-content">
							<text class="stat-number" :class="{ 'loading': isLoading }">{{ isLoading ? '...' : stats.totalStudents }}</text>
							<text class="stat-label">总学生数</text>
						</view>
					</view>
					<view class="stat-item">
						<view class="stat-icon bookings-stat">
							<text class="stat-icon-text">📅</text>
						</view>
						<view class="stat-content">
							<text class="stat-number" :class="{ 'loading': isLoading }">{{ isLoading ? '...' : stats.todayBookings }}</text>
							<text class="stat-label">今日预约</text>
						</view>
					</view>
					<view class="stat-item">
						<view class="stat-icon recharge-stat">
							<text class="stat-icon-text">💰</text>
						</view>
						<view class="stat-content">
							<text class="stat-number" :class="{ 'loading': isLoading, 'highlight': stats.pendingRecharges > 0 }">{{ isLoading ? '...' : stats.pendingRecharges }}</text>
							<text class="stat-label">充值待处理</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 快捷管理功能 -->
		<view class="quick-actions">
			<view class="section-header">
				<text class="section-title">管理中心</text>
				<text class="section-subtitle">快速访问管理功能</text>
			</view>
			<view class="action-grid">
				<view class="action-item" @click="navigateTo('/pages/admin/hours')">
					<view class="action-background">
						<view class="action-pattern"></view>
					</view>
					<view class="action-icon students-icon">
						<text class="icon-text">⏰</text>
					</view>
					<view class="action-content">
						<text class="action-text">课时管理</text>
						<text class="action-desc">管理学生课时</text>
					</view>
					<view class="action-arrow">
						<text class="arrow-text">→</text>
					</view>
				</view>
				<view class="action-item" @click="navigateTo('/pages/admin/recharge-management')">
					<view class="action-background">
						<view class="action-pattern"></view>
					</view>
					<view class="action-icon recharge-management-icon">
						<text class="icon-text">💰</text>
					</view>
					<view class="action-content">
						<text class="action-text">充值管理</text>
						<text class="action-desc">处理学生充值申请</text>
						<view v-if="stats.pendingRecharges > 0" class="action-badge">
							<text class="badge-text">{{ stats.pendingRecharges }}</text>
						</view>
					</view>
					<view class="action-arrow">
						<text class="arrow-text">→</text>
					</view>
				</view>
				<view class="action-item" @click="navigateTo('/pages/admin/banners')">
					<view class="action-background">
						<view class="action-pattern"></view>
					</view>
					<view class="action-icon banners-icon">
						<text class="icon-text">🖼️</text>
					</view>
					<view class="action-content">
						<text class="action-text">轮播图管理</text>
						<text class="action-desc">管理首页轮播</text>
					</view>
					<view class="action-arrow">
						<text class="arrow-text">→</text>
					</view>
				</view>
				<view class="action-item" @click="navigateTo('/pages/admin/bookings')">
					<view class="action-background">
						<view class="action-pattern"></view>
					</view>
					<view class="action-icon bookings-icon">
						<text class="icon-text">📅</text>
					</view>
					<view class="action-content">
						<text class="action-text">预约管理</text>
						<text class="action-desc">处理预约申请</text>
					</view>
					<view class="action-arrow">
						<text class="arrow-text">→</text>
					</view>
				</view>
				<view class="action-item" @click="navigateTo('/pages/admin/students')">
					<view class="action-background">
						<view class="action-pattern"></view>
					</view>
					<view class="action-icon hours-icon">
						<text class="icon-text">👥</text>
					</view>
					<view class="action-content">
						<text class="action-text">学生管理</text>
						<text class="action-desc">管理学生信息</text>
					</view>
					<view class="action-arrow">
						<text class="arrow-text">→</text>
					</view>
				</view>
				<view class="action-item" @click="navigateTo('/pages/admin/attendance')">
					<view class="action-background">
						<view class="action-pattern"></view>
					</view>
					<view class="action-icon attendance-icon">
						<text class="icon-text">✅</text>
					</view>
					<view class="action-content">
						<text class="action-text">签到签退</text>
						<text class="action-desc">管理学生到离校</text>
					</view>
					<view class="action-arrow">
						<text class="arrow-text">→</text>
					</view>
				</view>
				<view class="action-item" @click="navigateTo('/pages/admin/course-schedule')">
					<view class="action-background">
						<view class="action-pattern"></view>
					</view>
					<view class="action-icon course-icon">
						<text class="icon-text">📚</text>
					</view>
					<view class="action-content">
						<text class="action-text">课程安排</text>
						<text class="action-desc">管理课程安排图片</text>
					</view>
					<view class="action-arrow">
						<text class="arrow-text">→</text>
					</view>
				</view>
				<view class="action-item" @click="navigateTo('/pages/admin/about-us')">
					<view class="action-background">
						<view class="action-pattern"></view>
					</view>
					<view class="action-icon about-icon">
						<text class="icon-text">ℹ️</text>
					</view>
					<view class="action-content">
						<text class="action-text">关于我们</text>
						<text class="action-desc">管理海报和联系方式</text>
					</view>
					<view class="action-arrow">
						<text class="arrow-text">→</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 个人中心入口 -->
		<view class="profile-section">
			<view class="profile-item" @click="navigateTo('/pages/admin/profile')">
				<view class="profile-background">
					<view class="profile-pattern"></view>
				</view>
				<view class="profile-icon">
					<text class="icon-text">👨‍💼</text>
				</view>
				<view class="profile-info">
					<text class="profile-title">个人中心</text>
					<text class="profile-desc">管理个人信息</text>
				</view>
				<view class="profile-arrow">
					<text class="arrow-text">→</text>
				</view>
			</view>
		</view>




		<!-- 底部装饰 -->
		<view class="bottom-decoration">
			<view class="decoration-line"></view>
		</view>
		</view>
</template>

<script>
import { getApiUrl, getRequestConfig, API_CONFIG, apiRequest } from '@/config/api.js'

export default {
	data() {
		return {
			adminInfo: {
				adminName: '管理员',
				avatarUrl: ''
			},
			stats: {
				totalStudents: 0,
				todayBookings: 0,
				pendingRecharges: 0
			},
			studentsData: {
				totalStudents: 0,
				totalClasses: 0,
				thisMonthStudents: 0,
				recentStudents: []
			},
			isLoading: false
		}
	},
	onLoad() {
		this.checkAdminPermission()
		this.loadAdminInfo()
		this.loadStudentsData()
	},
	methods: {
		checkAdminPermission() {
			const userInfo = uni.getStorageSync('userInfo')
			if (!userInfo || userInfo.role !== 1) {
				uni.showToast({
					title: '无权限访问',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		},

		loadAdminInfo() {
			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo) {
				this.adminInfo.adminName = userInfo.name || '管理员'
			}
		},

		navigateTo(url) {
			uni.navigateTo({
				url: url
			})
		},

		handleLogout() {
			uni.showModal({
				title: '退出登录',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 清除本地存储
						uni.removeStorageSync('token')
						uni.removeStorageSync('userInfo')

						uni.showToast({
							title: '已退出登录',
							icon: 'success'
						})

						// 跳转到登录页
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}, 1500)
					}
				}
			})
		},

		async loadStudentsData() {
			try {
				this.isLoading = true
				console.log('开始加载学生数据...')

				const token = uni.getStorageSync('token')
				if (!token) {
					console.log('未找到token，无法获取数据')
					this.isLoading = false
					return
				}

				// 并行调用API获取统计数据和充值待处理数据
				const [statsResponse, rechargeResponse] = await Promise.all([
					apiRequest({
						url: getApiUrl(API_CONFIG.ENDPOINTS.LESSON_ADMIN_STATS),
						method: 'GET',
						header: {
							'Content-Type': 'application/json',
							'Authorization': `Bearer ${token}`
						}
					}),
					apiRequest({
						url: getApiUrl('/api/lesson/admin/getStudentRechargeList'),
						method: 'GET',
						header: {
							'Content-Type': 'application/json',
							'Authorization': `Bearer ${token}`
						}
					})
				])

				console.log('API响应:', statsResponse, rechargeResponse)

				if (statsResponse.code === 200) {
					const statsData = statsResponse.data

					// 更新统计数据
					this.stats.totalStudents = statsData.totalStudents || 0
					this.stats.todayBookings = statsData.todayBookings || 0
					this.stats.pendingRecharges = statsData.pendingRecharges || 0

					// 更新学生数据
					this.studentsData.totalStudents = statsData.totalStudents || 0
					this.studentsData.totalClasses = statsData.totalClasses || 0
					this.studentsData.thisMonthStudents = statsData.thisMonthStudents || 0

					console.log('统计数据加载完成:', this.stats)
					console.log('学生数据加载完成:', this.studentsData)

					// 将数据存储到本地，供其他页面使用
					uni.setStorageSync('studentsData', this.studentsData)
					console.log('学生数据已存储到本地')
				} else {
					console.log('获取统计数据失败:', statsResponse.message)
					// 设置默认值
					this.stats.totalStudents = 0
					this.stats.todayBookings = 0
					this.stats.pendingRecharges = 0
				}

				// 处理充值待处理数据
				if (rechargeResponse.code === 200) {
					this.stats.pendingRecharges = (rechargeResponse.data || []).length
					console.log('充值待处理数量:', this.stats.pendingRecharges)
				} else {
					console.log('获取充值待处理数据失败:', rechargeResponse.message)
					this.stats.pendingRecharges = 0
				}

				// 如果有待处理的充值，显示提醒
				if (this.stats.pendingRecharges > 0) {
					uni.showToast({
						title: `有${this.stats.pendingRecharges}个充值申请待处理`,
						icon: 'none',
						duration: 3000
					})
				}

			} catch (error) {
				console.error('Failed to load students data:', error)
				// 设置默认值
				this.stats.totalStudents = 0
				this.stats.todayBookings = 0
				this.stats.pendingRecharges = 0

				uni.showToast({
					title: '加载数据失败',
					icon: 'none',
					duration: 2000
				})
			} finally {
				this.isLoading = false
			}
		},

		// 数据同步方法
		syncStudentsData() {
			const storedData = uni.getStorageSync('studentsData')
			if (storedData) {
				this.studentsData = storedData
			}
		},

		onShow() {
			// 页面显示时同步数据
			this.syncStudentsData()
		},

		getStudentStatus(student) {
			if (student.isActive) {
				return '活跃'
			} else {
				return '休学'
			}
		},

		viewStudentDetails(student) {
			uni.navigateTo({
				url: `/pages/admin/student-hours?id=${student.id}`
			})
		},

		async refreshData() {
			uni.showLoading({
				title: '加载中...'
			})
			try {
				await this.loadStudentsData()
				uni.hideLoading()
				uni.showToast({
					title: '数据已刷新',
					icon: 'success'
				})
			} catch (error) {
				console.error('Failed to refresh data:', error)
				uni.hideLoading()
				uni.showToast({
					title: '刷新失败',
					icon: 'none'
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 50%, #1E2332 100%);
	padding-bottom: 40rpx;
	position: relative;
	overflow: hidden;
}

.top-decoration {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 400rpx;
	pointer-events: none;
	z-index: 1;

	.decoration-circle {
		position: absolute;
		border-radius: 50%;
		background: radial-gradient(circle at center, rgba(0, 184, 212, 0.3), transparent 70%);

		&.circle-1 {
			width: 200rpx;
			height: 200rpx;
			top: -100rpx;
			right: -50rpx;
		}

		&.circle-2 {
			width: 150rpx;
			height: 150rpx;
			top: 50rpx;
			left: -75rpx;
		}

		&.circle-3 {
			width: 100rpx;
			height: 100rpx;
			top: 200rpx;
			right: 100rpx;
		}
	}
}

.admin-card {
	margin: 20rpx;
	padding: 40rpx;
	background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
	border-radius: 24rpx;
	box-shadow: 0 12rpx 48rpx rgba(0, 184, 212, 0.4);
	position: relative;
	overflow: hidden;
	z-index: 2;
	border: 1rpx solid rgba(255, 255, 255, 0.2);

	.card-background {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;

		.bg-pattern {
			position: absolute;
			top: -50%;
			left: -50%;
			right: -50%;
			bottom: -50%;
			background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
			animation: shimmer 3s ease-in-out infinite;
		}
	}

	.admin-header {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		position: relative;
		z-index: 3;

		.avatar-container {
			position: relative;
			margin-right: 30rpx;

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				border: 6rpx solid rgba(255, 255, 255, 0.3);
				position: relative;
				z-index: 2;
			}

			.avatar-ring {
				position: absolute;
				top: -8rpx;
				left: -8rpx;
				right: -8rpx;
				bottom: -8rpx;
				border-radius: 50%;
				border: 2rpx solid rgba(0, 184, 212, 0.6);
				animation: pulse 2s ease-in-out infinite;
			}
		}

		.admin-info {
			flex: 1;

			.admin-name {
				display: block;
				font-size: 40rpx;
				color: #FFFFFF;
				font-weight: bold;
				margin-bottom: 8rpx;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
			}

			.admin-role {
				font-size: 26rpx;
				color: rgba(255, 255, 255, 0.9);
				margin-bottom: 12rpx;
			}

			.status-indicator {
				display: flex;
				align-items: center;

				.status-dot {
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background: #4CAF50;
					margin-right: 8rpx;
					animation: blink 2s ease-in-out infinite;
				}

				.status-text {
					font-size: 22rpx;
					color: rgba(255, 255, 255, 0.8);
				}
			}
		}

		.admin-actions {
			display: flex;
			align-items: center;
			margin-left: 30rpx;

			.refresh-btn {
				padding: 16rpx 24rpx;
				background: rgba(244, 67, 54, 0.9);
				border-radius: 16rpx;
				border: 1rpx solid rgba(244, 67, 54, 0.3);
				transition: all 0.3s ease;
				backdrop-filter: blur(10rpx);
				margin-right: 15rpx;

				&:active {
					transform: scale(0.95);
					background: rgba(229, 74, 25, 0.9);
				}

				.refresh-icon {
					font-size: 24rpx;
					margin-right: 8rpx;
				}

				.refresh-text {
					font-size: 26rpx;
					color: #FFFFFF;
					font-weight: 500;
				}
			}

			.logout-btn {
				padding: 16rpx 24rpx;
				background: rgba(244, 67, 54, 0.9);
				border-radius: 16rpx;
				border: 1rpx solid rgba(244, 67, 54, 0.3);
				transition: all 0.3s ease;
				backdrop-filter: blur(10rpx);

				&:active {
					transform: scale(0.95);
					background: rgba(229, 74, 25, 0.9);
				}

				.logout-icon {
					font-size: 24rpx;
					margin-right: 8rpx;
				}

				.logout-text {
					font-size: 26rpx;
					color: #FFFFFF;
					font-weight: 500;
				}
			}
		}
	}

	.admin-stats {
		position: relative;
		z-index: 3;

		.stats-header {
			text-align: center;
			margin-bottom: 40rpx;

			.stats-title {
				display: block;
				font-size: 36rpx;
				color: #FFFFFF;
				font-weight: bold;
				margin-bottom: 12rpx;
				text-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
			}

			.stats-subtitle {
				font-size: 26rpx;
				color: rgba(255, 255, 255, 0.9);
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
			}
		}

		.stats-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20rpx;

			.stat-item {
				background: rgba(255, 255, 255, 0.15);
				border-radius: 20rpx;
				padding: 30rpx 20rpx;
				text-align: center;
				backdrop-filter: blur(15rpx);
				border: 1rpx solid rgba(255, 255, 255, 0.3);
				transition: all 0.3s ease;
				position: relative;
				overflow: hidden;
				animation: fadeInUp 0.6s ease-out;

				&:nth-child(1) {
					animation-delay: 0.1s;
				}

				&:nth-child(2) {
					animation-delay: 0.2s;
				}

				&:nth-child(3) {
					animation-delay: 0.3s;
				}

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
					opacity: 0;
					transition: opacity 0.3s ease;
				}

				&:hover {
					transform: translateY(-6rpx);
					box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.3);
					border-color: rgba(255, 255, 255, 0.5);

					&::before {
						opacity: 1;
					}
				}

				.stat-icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin: 0 auto 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					z-index: 2;
					box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);

					&.students-stat {
						background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
						box-shadow: 0 8rpx 24rpx rgba(0, 184, 212, 0.4);
					}

					&.bookings-stat {
						background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
						box-shadow: 0 8rpx 24rpx rgba(76, 175, 80, 0.4);
					}

					&.recharge-stat {
						background: linear-gradient(135deg, #9C27B0 0%, #AB47BC 100%);
						box-shadow: 0 8rpx 24rpx rgba(156, 39, 176, 0.4);
					}

					.stat-icon-text {
						font-size: 32rpx;
						color: #FFFFFF;
						text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
					}
				}

				.stat-content {
					position: relative;
					z-index: 2;

					.stat-number {
						font-size: 44rpx;
						color: #FFFFFF;
						font-weight: bold;
						text-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
						transition: all 0.3s ease;
						display: block;
						margin-bottom: 8rpx;

						&.loading {
							opacity: 0.6;
							animation: pulse 1.5s infinite;
						}

						&.highlight {
							color: #FF9800; /* 高亮颜色 */
							font-weight: bolder;
						}
					}

					.stat-label {
						font-size: 24rpx;
						color: rgba(255, 255, 255, 0.9);
						font-weight: 500;
						text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
					}
				}
			}
		}
	}
}

.quick-actions {
	margin: 20rpx;
	position: relative;
	z-index: 2;

	.section-header {
		text-align: center;
		margin-bottom: 30rpx;

		.section-title {
			display: block;
			font-size: 36rpx;
			color: #FFFFFF;
			font-weight: bold;
			margin-bottom: 8rpx;
		}

		.section-subtitle {
			font-size: 24rpx;
			color: #AAB4BE;
		}
	}

	.action-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;

		.action-item {
			background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 100%);
			border-radius: 20rpx;
			padding: 30rpx 20rpx;
			position: relative;
			overflow: hidden;
			border: 1rpx solid #2a2f3e;
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.98);
				background: linear-gradient(135deg, #2A2F3E 0%, #3A3F4E 100%);
			}

			.action-background {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				overflow: hidden;

				.action-pattern {
					position: absolute;
					top: -50%;
					left: -50%;
					right: -50%;
					bottom: -50%;
					background: linear-gradient(45deg, transparent 30%, rgba(0, 184, 212, 0.05) 50%, transparent 70%);
					animation: shimmer 4s ease-in-out infinite;
				}
			}

			.action-icon {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin: 0 auto 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				z-index: 2;

				&.students-icon {
					background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
					box-shadow: 0 8rpx 24rpx rgba(0, 184, 212, 0.3);
				}

				&.banners-icon {
					background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
					box-shadow: 0 8rpx 24rpx rgba(76, 175, 80, 0.3);
				}

				&.bookings-icon {
					background: linear-gradient(135deg, #f0ad4e 0%, #ff9800 100%);
					box-shadow: 0 8rpx 24rpx rgba(240, 173, 78, 0.3);
				}

				&.hours-icon {
					background: linear-gradient(135deg, #e91e63 0%, #f44336 100%);
					box-shadow: 0 8rpx 24rpx rgba(233, 30, 99, 0.3);
				}

				&.attendance-icon {
					background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
					box-shadow: 0 8rpx 24rpx rgba(76, 175, 80, 0.3);
				}

				&.course-icon {
					background: linear-gradient(135deg, #9C27B0 0%, #AB47BC 100%);
					box-shadow: 0 8rpx 24rpx rgba(156, 39, 176, 0.3);
				}

				&.about-icon {
					background: linear-gradient(135deg, #FF9800 0%, #F44336 100%);
					box-shadow: 0 8rpx 24rpx rgba(240, 152, 0, 0.3);
				}

				&.recharge-management-icon {
					background: linear-gradient(135deg, #9C27B0 0%, #AB47BC 100%);
					box-shadow: 0 8rpx 24rpx rgba(156, 39, 176, 0.3);
				}

				.icon-text {
					font-size: 36rpx;
				}
			}

			.action-content {
				text-align: center;
				position: relative;
				z-index: 2;

				.action-text {
					display: block;
					font-size: 28rpx;
					color: #FFFFFF;
					font-weight: 500;
					margin-bottom: 8rpx;
				}

				.action-desc {
					font-size: 22rpx;
					color: #AAB4BE;
				}

				.action-badge {
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					background: #FF9800;
					border-radius: 20rpx;
					padding: 4rpx 10rpx;
					min-width: 40rpx;
					text-align: center;
					font-size: 22rpx;
					font-weight: bold;
					color: #FFFFFF;
					box-shadow: 0 4rpx 12rpx rgba(255, 152, 0, 0.3);
				}
			}

			.action-arrow {
				position: absolute;
				top: 50%;
				right: 20rpx;
				transform: translateY(-50%);
				opacity: 0.6;
				transition: all 0.3s ease;

				.arrow-text {
					font-size: 24rpx;
					color: #00B8D4;
				}
			}

			&:hover .action-arrow {
				opacity: 1;
				transform: translateY(-50%) translateX(4rpx);
			}
		}
	}
}

.profile-section {
	margin: 20rpx;
	position: relative;
	z-index: 2;

	.profile-item {
		background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 100%);
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		border: 1rpx solid #2a2f3e;
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;

		&:active {
			transform: scale(0.98);
			background: linear-gradient(135deg, #2A2F3E 0%, #3A3F4E 100%);
		}

		.profile-background {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			overflow: hidden;

			.profile-pattern {
				position: absolute;
				top: -50%;
				left: -50%;
				right: -50%;
				bottom: -50%;
				background: linear-gradient(45deg, transparent 30%, rgba(0, 184, 212, 0.05) 50%, transparent 70%);
				animation: shimmer 5s ease-in-out infinite;
			}
		}

		.profile-icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: linear-gradient(135deg, #ff9800 0%, #f44336 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
			position: relative;
			z-index: 2;
			box-shadow: 0 6rpx 20rpx rgba(255, 152, 0, 0.3);

			.icon-text {
				font-size: 28rpx;
			}
		}

		.profile-info {
			flex: 1;
			position: relative;
			z-index: 2;

			.profile-title {
				display: block;
				font-size: 30rpx;
				color: #FFFFFF;
				font-weight: 500;
				margin-bottom: 8rpx;
			}

			.profile-desc {
				font-size: 24rpx;
				color: #AAB4BE;
			}
		}

		.profile-arrow {
			position: relative;
			z-index: 2;

			.arrow-text {
				font-size: 30rpx;
				color: #00B8D4;
				transition: all 0.3s ease;
			}
		}

		&:hover .profile-arrow .arrow-text {
			transform: translateX(4rpx);
		}
	}
}

.students-overview {
	margin: 20rpx;
	position: relative;
	z-index: 2;

	.section-header {
		text-align: center;
		margin-bottom: 30rpx;

		.section-title {
			display: block;
			font-size: 36rpx;
			color: #FFFFFF;
			font-weight: bold;
			margin-bottom: 8rpx;
		}

		.section-subtitle {
			font-size: 24rpx;
			color: #AAB4BE;
		}
	}

	.students-stats {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
		margin-bottom: 30rpx;

		.stat-card {
			background: rgba(255, 255, 255, 0.1);
			border-radius: 16rpx;
			padding: 24rpx 16rpx;
			text-align: center;
			backdrop-filter: blur(10rpx);
			border: 1rpx solid rgba(255, 255, 255, 0.2);
			transition: all 0.3s ease;

			&:hover {
				transform: translateY(-4rpx);
				box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
			}

			.stat-icon {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin: 0 auto 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
				box-shadow: 0 8rpx 24rpx rgba(0, 184, 212, 0.3);

				.icon-text {
					font-size: 28rpx;
				}
			}

			.stat-content {
				.stat-number {
					display: block;
					font-size: 36rpx;
					color: #FFFFFF;
					font-weight: bold;
					margin-bottom: 8rpx;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
				}

				.stat-label {
					font-size: 22rpx;
					color: rgba(255, 255, 255, 0.9);
				}
			}
		}
	}

	.recent-students {
		background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 100%);
		border-radius: 20rpx;
		padding: 30rpx;
		border: 1rpx solid #2a2f3e;
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.98);
			background: linear-gradient(135deg, #2A2F3E 0%, #3A3F4E 100%);
		}

		.list-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.list-title {
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: bold;
			}

			.list-more {
				font-size: 24rpx;
				color: #00B8D4;
				text-decoration: underline;
				cursor: pointer;
			}
		}

		.students-list {
			.empty-students {
				text-align: center;
				padding: 40rpx 0;
				color: #AAB4BE;
				font-size: 28rpx;
			}

			.student-item {
				display: flex;
				align-items: center;
				padding: 16rpx 0;
				border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
				transition: all 0.3s ease;

				&:last-child {
					border-bottom: none;
				}

				&:active {
					background: linear-gradient(135deg, #2A2F3E 0%, #3A3F4E 100%);
				}

				.student-avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					object-fit: cover;
				}

				.student-info {
					flex: 1;
					margin-right: 20rpx;

					.student-name {
						display: block;
						font-size: 28rpx;
						color: #FFFFFF;
						font-weight: 500;
						margin-bottom: 4rpx;
					}

					.student-class {
						font-size: 22rpx;
						color: #AAB4BE;
						margin-bottom: 4rpx;
					}

					.student-phone {
						font-size: 22rpx;
						color: #AAB4BE;
					}
				}

				.student-status {
					padding: 8rpx 12rpx;
					background: rgba(255, 255, 255, 0.1);
					border-radius: 12rpx;
					border: 1rpx solid rgba(255, 255, 255, 0.2);
					backdrop-filter: blur(10rpx);

					.status-text {
						font-size: 22rpx;
						color: #FFFFFF;
						font-weight: 500;
					}
				}
			}
		}
	}
}

.bottom-decoration {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	pointer-events: none;
	z-index: 1;

	.decoration-line {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 200rpx;
		height: 4rpx;
		background: linear-gradient(to right, transparent, #00B8D4, transparent);
		border-radius: 2rpx;
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes shimmer {
	0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
	100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

@keyframes pulse {
	0% {
		opacity: 0.6;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.6;
	}
}

@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}
</style>
